<template>
	<view class="exhale" :style="{ paddingTop: paddingHeight + 'px' }">
		<nav-bar></nav-bar>
		<view class="c-container">
			<view class="hint-box">
				<view class="title">1、肺活量采集</view>
				<view class="text">
					为提供准确的代谢等级测量结果，需先采集肺活量以确定个人呼吸特征（需要测量{{
						type == 'default' ? '3' : '1'
					}}次）
				</view>
			</view>
			<view class="hint-box">
				<view class="title">2、采集过程坐直，吹气时不要弯腰</view>
				<view class="text">
					坐直，一手手持手机，一手手持设备衔在嘴里往设备中吹气
				</view>
			</view>
			<view class="iamge-box">
				<image
					src="http://oss.antaimedical.com/images/pro/2025/02/67ab0ba4e4b0d615350f31334E0ylOV5CFbr9c433238308c5ab61b1597860a98843c.png"
					class="img"
				/>
				<image
					src="http://oss.antaimedical.com/images/pro/2025/02/67ab0b61e4b0be9d4442343fPF5JsDoFQ1rhd625e8c871a9960db7945de81947eb52.png"
					class="img"
				/>
			</view>
			<view class="course" @click="goWebView">
				<view class="c-left">
					<view class="c-t">
						肺活量采集测量教程
					</view>
					<view class="c-b">
						大多数观看此视频指南的人都可以更快地掌握该技术
					</view>
				</view>
				<u-image width="80rpx" :showMenuByLongpress="false" shape="circle" height="80rpx"
					src="http://oss.antaimedical.com/images/static/2024/08/66b07dade4b000d2c606b51d3upyoLq2EQvy6383f7f98771573af1a373223d388ae2.png"
					:lazy-load="true"></u-image>
			</view>
		</view>
		<view class="btn-list">
			<view class="skip_button" @click="skip"> 跳过 </view>
			<view class="large_button" @click="start"> 开始采集 </view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			paddingHeight: uni.getStorageSync('navbarHeight'),
			userId: uni.getStorageSync('userId'),
			type: 'default'
		}
	},
	onLoad(OPTIONS) {
		if (OPTIONS.type) this.type = OPTIONS.type
	},
	methods: {
		start() {
			uni.redirectTo({
				url: `/pagesB/login/device/measure/prepare?type=${this.type}`
			})
		},
		skip() {
			uni.switchTab({
				url: '/pages/health/index'
			})
		},
		goWebView() {
			uni.navigateTo({
				url: '/pagesB/login/device/measure/webview?type=exhale'
			})
		}
	}
}
</script>
<style lang="scss">
page {
	background-color: #fff;
	min-height: 100%;
}
</style>
<style lang="scss" scoped>
.exhale {
	padding-bottom: 48rpx;
    height: 100vh;
	.c-container {
		padding: 48rpx 30rpx;

		.hint-box {
			margin-bottom: 34rpx;
			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #1f2434;
				line-height: 40rpx;
				text-align: left;
				margin-bottom: 12rpx;
			}
			.text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(31, 36, 52, 0.85);
				line-height: 46rpx;
				text-align: left;
			}
		}
		.iamge-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 64rpx;
			.img {
				width: 340rpx;
				height: 234rpx;
			}
		}

		.course {
			width: 100%;
			padding: 24rpx 44rpx 24rpx 32rpx;
			margin-top: 54rpx;
			background: linear-gradient(139deg, #eff6f9 0%, #eceeff 100%);
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.c-left {
				flex: 1;
				padding-right: 58rpx;

				.c-t {
					font-weight: 500;
					font-size: 28rpx;
					color: #666666;
					text-align: left;
					padding-bottom: 12rpx;
				}

				.c-b {
					font-size: 24rpx;
					color: #666666;
					text-align: left;
				}
			}
		}
	}
	.btn-list {
		text-align: center;
		display: flex;
		justify-content: space-between;
		align-items: center;
        padding: 0 30rpx;
        position: fixed;
        left: 50%;
        bottom: 126rpx;
        transform: translateX(-50%);
	}
	.skip_button {
		width: 338rpx;
		height: 85rpx;
		background: rgba(31, 36, 52, .1);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #1f2434;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20rpx;
	}
	.large_button {
		width: 338rpx;
		height: 85rpx;
		background: #1f2434;
		border-radius: 46rpx 46rpx 46rpx 46rpx;
        font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
	}
}
</style>
